<template>
  <div class='container'>
    <el-row :gutter="20">
      <el-col :span="7">
        <el-card class="card">
          <div slot="header" class="clearfix">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          </div>
          <div class="card-body">
            <el-tree ref="tree" :props="props" :data="data" :highlight-current="false" node-key="id" :default-expanded-keys="[99999]" :filter-node-method="filterNode" :render-content="renderContent">
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card>
          <div slot="header" class="clearfix">
            {{tableName}}
          </div>
          <div class="card-body">
            <el-form class="search-form">
              <el-form-item class="form-button-bar">
                <el-button class="filter-item el-icon-upload2" @click="handleOnline()" type="success">&nbsp;上线
                </el-button>
                <el-button class="filter-item el-icon-back" style="margin-left: 10px;" @click="handleRevocation()" type="warning">&nbsp;下线
                </el-button>
                <el-button :loading="refreshing" class="filter-item el-icon-refresh" style="margin-left: 10px;" @click="refreshList" type="danger">&nbsp;刷新列表
                </el-button>
                <el-button plain class="search-bar-button" style="float: right;border-width: 2px" type="primary" @click="searchBarVisable = !searchBarVisable">{{searchBarVisable?'收起':'展开'}}搜索项<i
                    :class="searchBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
                </el-button>
              </el-form-item>
            </el-form>
            <el-form class="search-form" label-width="100px">
              <div :class="searchBarVisable?'':'search-bar-hide'" style="transition:  all .3s ease-in-out;">
                <el-form-item label="标题">
                  <el-input style="max-width: 500px" :clearable="true" v-model="listQuery.title" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- <el-form-item label="类型">
                  <el-select v-model="listQuery.type" placeholder="请选择">
                    <el-option label="股票" value="stock"></el-option>
                    <el-option label="基金" value="fund"></el-option>
                    <el-option label="问询函件" value="inquiry"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="相关证券">
                  <el-input style="max-width: 500px" :clearable="true" v-model="listQuery.stkCode" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="上线状态">
                  <el-radio v-model="listQuery.onlineStatus" label="" border size="mini">全部</el-radio>
                  <el-radio v-model="listQuery.onlineStatus" label="0" border size="mini">已上线</el-radio>
                  <el-radio v-model="listQuery.onlineStatus" label="1" border size="mini">未上线</el-radio>
                </el-form-item>

                <el-form-item label="发布时间">
                  <el-radio v-model="listQuery.chooseTime2" label="" border size="mini">自定义</el-radio>
                  <el-radio v-model="listQuery.chooseTime2" label="1" border size="mini">今天</el-radio>
                  <el-radio v-model="listQuery.chooseTime2" label="3" border size="mini">近三天</el-radio>
                </el-form-item>
                <el-form-item label="">
                  <el-date-picker :clearable="true" type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="listQuery.chooseTime2 = ''" @keyup.enter.native="getList"
                    style="width: 450px;" class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="listQuery.publishTime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="更新时间">
                  <el-radio v-model="listQuery.chooseTime" label="" border size="mini">自定义</el-radio>
                  <el-radio v-model="listQuery.chooseTime" label="1" border size="mini">今天</el-radio>
                  <el-radio v-model="listQuery.chooseTime" label="3" border size="mini">近三天</el-radio>
                </el-form-item>
                <el-form-item label="">
                  <el-date-picker :clearable="true" type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="listQuery.chooseTime = ''" @keyup.enter.native="getList"
                    style="width: 450px;" class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="listQuery.updateTime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchListQuery">
                    {{$t('table.search')}}
                  </el-button>
                </el-form-item>
              </div>

            </el-form>
            <el-table stripe :data="tableData" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
              <el-table-column align="center" type="selection" width="55"></el-table-column>
              <el-table-column align="center" label="标题" width="250">
                <template slot-scope="scope">
                  <el-button class="preview-button" type="text" @click="handleShow(scope.row)">{{scope.row.title}}
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column align="center" label="相关证券">
                <template slot-scope="scope">
                  <span>{{scope.row.stkCode}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="发布时间">
                <template slot-scope="scope">
                  <span>{{scope.row.publishTime}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="更新时间">
                <template slot-scope="scope">
                  <span>{{scope.row.updateTime}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="上线状态">
                <template slot-scope="scope">
                  <span>{{formatOnline(scope.row.onlineStatus)}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="所属类别">
                <template slot-scope="scope">
                  <span>{{scope.row.tagName?scope.row.tagName:'问询函件'}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作人">
                <template slot-scope="scope">
                  <span>{{scope.row.updater}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('table.actions')" width="150" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-edit" type="primary" size="mini" @click="handleShowEditor(scope.row)">
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="查看" placement="top">
                    <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-view" type="primary" size="mini" @click="handleShow(scope.row)">
                    </el-button>
                  </el-tooltip>
                  <el-tooltip v-if="scope.row.onlineStatus === 1" content="上线" placement="top">
                    <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-upload2" type="success" size="mini" @click="handleOnline(scope.row)">
                    </el-button>
                  </el-tooltip>
                  <el-tooltip v-else content="下线" placement="top">
                    <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-back" type="warning" size="mini" @click="handleRevocation(scope.row)">
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>

            </el-table>
            <div class="pagination-container">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30, 50]"
                :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
            <el-dialog fullscreen :title="'查看'" :visible.sync="dialogFormVisible">
              <el-form ref="dataForm" :model="temp" label-position="left" label-width="110px" style='margin: auto; max-width: 1200px'>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <el-form-item label="标题" prop="title">
                      <el-input disabled v-model="temp.title" type="text" placeholder="请输入">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="相关证券" prop="stkCode">
                      <el-input disabled v-model="temp.stkCode" type="text" placeholder="请输入">
                      </el-input>
                    </el-form-item>
                    <el-row :gutter="24">
                      <el-col :span="21">
                        <el-form-item label="所属类别" prop="tagName">
                          <el-input disabled v-model="temp.tagName" type="text" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="3">
                        <a :href="temp.ossUrl" :name="temp.title" target="_blank">
                          <el-button type="warning" icon="el-icon-download">查看原PDF</el-button>
                        </a>
                      </el-col>
                    </el-row>
                    <el-form-item label="正文预览" prop="content">
                      <el-tabs type="card">
                        <el-tab-pane label="手机预览">
                          <el-card class="phone">
                            <div slot="header" class="top-bar">
                              <span>公告预览</span>
                            </div>
                            <!-- <div class="top-bar">公告预览</div> -->
                            <div class="title">{{temp.title}}</div>
                            <div class="info">
                            	<span>发布时间：{{temp.publishTime}}</span>
                            </div>
                            <div class="content news_txt" v-html="temp.content"></div>
                          </el-card>
                        </el-tab-pane>
                        <el-tab-pane label="PC预览">
                          <el-card class="pc">
                            <div class="title">{{temp.title}}</div>
                            <div class="info">
                            	<span>发布时间：{{temp.publishTime}}</span>
                            </div>
                            <div class="content news_txt" v-html="temp.content"></div>
                          </el-card>
                        </el-tab-pane>
                      </el-tabs>
                    </el-form-item>
                    <el-form-item v-if="temp.createTime" label="入库时间" prop="createTime">
                      <el-input disabled v-model="temp.createTime" type="text" :rows="5" placeholder="请输入"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="text-align: center">
                  <el-button type="primary" @click="temp.content = '';dialogFormVisible = false">关闭</el-button>
                </div>
              </el-form>
            </el-dialog>
            <el-dialog fullscreen :title="'查看'" :visible.sync="dialogEditorVisible">
              <el-form ref="dataForm" :model="temp" label-position="left" label-width="110px" style='margin: auto; max-width: 1200px'>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <el-form-item label="标题" prop="title">
                      <el-input v-model="temp.title" type="text" placeholder="请输入">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="相关证券" prop="stkCode">
                      <el-input v-model="temp.stkCode" type="text" placeholder="请输入">
                      </el-input>
                    </el-form-item>
                    <el-form-item label="所属类别" prop="tagName">
                      <el-input v-model="temp.tagName" type="text" placeholder="请输入"></el-input>
                      <!-- <el-cascader
                            v-model="temp.tagId"
                            :options="tagOptions"
                            :props="{ checkStrictly: true, label:'tagName',value:'id' }"
                            :show-all-levels="false"
                            ref="tagSelect"
                            style="width:300px"
                            @change="handleTagChange"></el-cascader> -->
                    </el-form-item>
                    <el-row :gutter="24" style="padding-left:122px">
                      <el-button type="warning" icon="el-icon-download" @click="resolvePdf">再次解析</el-button>
                      <el-button type="warning" icon="el-icon-download" @click="deletePdfContent">删除解析内容</el-button>
                      <a :href="temp.ossUrl" :name="temp.title" target="_blank" style="margin-left:10px">
                        <el-button type="warning" icon="el-icon-download">查看原PDF</el-button>
                      </a>
                    </el-row>
                    <el-form-item label="正文" prop="content" style="padding-top:10px;">
                      <div id="editcontent">
                        <tinymce :data="temp" :sourceDict="dataDict.news_source" :preview="true" :preview-callback="handlePreview" ref="editor" :height="300" v-model="temp.content"></tinymce>
                      </div>
                    </el-form-item>
                    <el-row :gutter="24">
                      <el-col :span="12">
                        <el-form-item v-if="temp.createTime" label="入库时间" prop="createTime">
                          <el-input disabled v-model="temp.createTime" type="text" :rows="5" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="状态" prop="onlineStatusStr">
                          <el-select v-model="temp.onlineStatus" placeholder="请选择">
                            <!-- <el-option value="0">上线</el-option>
                            <el-option value="1">下线</el-option> -->
                            <el-option v-for="item in onlineStatusOption" :key="item.id" :label="item.text" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <div style="text-align: center">
                  <el-button type="primary" @click="savePdfEditor">保存</el-button>
                  <el-button type="primary" @click="temp.content = '';dialogEditorVisible = false">关闭</el-button>
                </div>
              </el-form>
            </el-dialog>
            <el-dialog :close-on-click-modal="false" :title="kindTitle" :visible.sync="centerDialogVisible" width="40%">
              <el-form :rules="rules" class="form" ref="formCreate" :model="formCreate" label-width="110px">
                <el-form-item label="类别态度" prop="attitudeStatus">
                  <el-select v-model="formCreate.attitudeStatus" placeholder="请选择">
                    <el-option label="无态度" :value="0"></el-option>
                    <el-option label="利空" :value="1"></el-option>
                    <el-option label="中性" :value="2"></el-option>
                    <el-option label="利好" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="推送情况" prop="pushStatus">
                  <el-select v-model="formCreate.pushStatus" placeholder="请选择">
                    <el-option label="不推送" :value="0"></el-option>
                    <el-option label="推送" :value="1"></el-option>
                  </el-select>
                </el-form-item>
                <div style="text-align: center">
                  <el-button @click="centerDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="edit()">确认</el-button>
                </div>
              </el-form>
            </el-dialog>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  noticeinfoList,
  inquiryList,
  inquiryOnline,
  noticeinfoOnlinenew,
  resolveAnnouncementContent,
  resolveInquiryContent,
  saveAnnouncementContentnew,
  saveInquiryContent,
  tagUpdate,
  stocknoticeTagAll,
  fundnoticeTagAll,
  thrboardnoticeTagAll,
  bondnoticeTagAll,
  getAnnouncementContentnew,
  getInquiryContent
} from '../../api/announcementManagement'
import { articleStockList, articleSourceGet } from '../../api/article'
import { getTypeDict } from '../../api/systemManagement'
import pinyin from 'pinyin'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'List',
  components: { Tinymce },
  created() {
    this.getDict()
    this.getList()
    this.getAnnouncement()
    // this.getStockList()
  },
  watch: {
    filterText(val) {
      return this.$refs.tree.filter(val)
    },
    'listQuery.chooseTime'(val) {
      if (val) {
        const endTime = new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate() + 1
        ).getTime()
        this.listQuery.updateTime = [
          endTime - 24 * 3600 * 1000 * val,
          endTime - 1000
        ]
      }
    },
    'listQuery.chooseTime2'(val) {
      if (val) {
        const endTime = new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate() + 1
        ).getTime()
        this.listQuery.publishTime = [
          endTime - 24 * 3600 * 1000 * val,
          endTime - 1000
        ]
      }
    }
  },
  computed: {
    tagOptionsData() {
      const arr = []
      const handleData = () => {}
    }
  },
  methods: {
    formatOnline(e) {
      switch (e) {
        case 0:
          return '已上线'
        case 1:
          return '未上线'
        default:
          return '已上线'
      }
    },
    formatContent(data) {
      if (!data.content) return
      // let str = `<div style="${ data.style }">${ data.content }</div>`
      return data.content
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.multipleSelectionIds = val.map((e) => e.id)
    },
    // 获取 问询函件的列表数据
    getInquiryList(params){

      let temp = {...params};
      delete temp.type;

       inquiryList(temp)
        .then((response) => {
          this.tableData = response.Data
          this.total = response.PageInfo.Total * 1
          this.listLoading = false
           this.refreshing = false
        })
        .catch(() => {
          this.listLoading = false
           this.refreshing = false
        })
    },
    searchListQuery(){
      this.listQuery.pageNum = 1
      this.getAnnouncement()
    },
    getAnnouncement() {
      this.listLoading = true
      this.listQuery.title = this.listQuery.title.trim()
      const params = Object.assign({}, this.listQuery)
      if (this.listQuery.updateTime) {
        params.updateStartTime = this.listQuery.updateTime[0]
        params.updateEndTime = this.listQuery.updateTime[1]
      } else {
        params.updateStartTime = ''
        params.updateEndTime = ''
      }
      if (this.listQuery.publishTime) {
        params.publishStartTime = this.listQuery.publishTime[0]
        params.publishEndTime = this.listQuery.publishTime[1]
      } else {
        params.publishStartTime = ''
        params.publishEndTime = ''
      }

      if(this.listQuery.type==="inquiry"){
        this.getInquiryList(params)
        return false;
      }
      noticeinfoList(params)
        .then((response) => {
          this.tableData = response.Data
          this.total = response.PageInfo.Total * 1
          this.listLoading = false
        })
        .catch((e) => {
          console.log('当前错误有'+e.toString());
          this.listLoading = false
        })
      },
      refreshList () {
        this.refreshing = true
        const params = Object.assign({}, this.listQuery)
        if (this.listQuery.updateTime) {
          params.updateStartTime = this.listQuery.updateTime[0]
          params.updateEndTime = this.listQuery.updateTime[1]
        } else {
          params.updateStartTime = ''
          params.updateEndTime = ''
        }
        if (this.listQuery.publishTime) {
          params.publishStartTime = this.listQuery.publishTime[0]
          params.publishEndTime = this.listQuery.publishTime[1]
        } else {
          params.publishStartTime = ''
          params.publishEndTime = ''
        }

        if(params.type==="inquiry"){
          this.getInquiryList(params)
          return false;
        }
      noticeinfoList(params)
        .then((response) => {
          this.tableData = response.Data
          this.total = response.PageInfo.Total * 1
          this.refreshing = false
        })
        .catch(() => {
          this.refreshing = false
        })
      },
      handleSizeChange (val) {
        this.listQuery.pageSize = val
        this.getAnnouncement()
      },
      handleCurrentChange (val) {
        this.listQuery.pageNum = val
        this.getAnnouncement()
      },
      handleOnline (e) {
        let params = [],type=''
        if (e) {
          params = [e.id]
          type=e.type
        } else {
          params = this.multipleSelectionIds
          type=this.multipleSelection.length>0?this.multipleSelection[0].type:''
        }
        if (params.length === 0) return

        if(this.listQuery.type==='inquiry'){

          inquiryOnline({
            batchIds: params,
            type:type,
            onlineStatus: 0
          }).then(() => {
            this.getAnnouncement()
            this.$notify({
              title: '成功',
              message: '上线成功',
              type: 'success',
              duration: 2000
            })
          })
          return;
        }

        noticeinfoOnlinenew({
          batchIds: params,
          type:type,
          onlineStatus: 0
        }).then(() => {
          this.getAnnouncement()
          this.$notify({
            title: '成功',
            message: '上线成功',
            type: 'success',
            duration: 2000
          })
        })
      },
      handleRevocation (e) {
        let type='', params = []
        if (e) {
          params = [e.id]
          type=e.type
        } else {
          params = this.multipleSelectionIds
          type= this.multipleSelection.length>0?this.multipleSelection[0].type:""
        }
        if (params.length === 0) return
        if(this.listQuery.type==='inquiry'){

          inquiryOnline({
            batchIds: params,
            type:type,
            onlineStatus: 1
          }).then(() => {
            this.getAnnouncement()
            this.$notify({
              title: '成功',
              message: '下线成功',
              type: 'success',
              duration: 2000
            })
          })
          return;
        }

        noticeinfoOnlinenew({
          batchIds: params,
          type:type,
          onlineStatus: 1
        }).then(() => {
        this.getAnnouncement()
        this.$notify({
          title: '成功',
          message: '下线成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleShowEditor(e) {
      if(this.listQuery.type==='inquiry'){
        getInquiryContent({ id: e.id, type: e.type })
        .then((res) => {
          const tar = res.Data[0]
          this.temp = Object.assign({}, tar)
          this.temp.tagName = '问询函件'
          // this.onlineStatusStr = this.temp.onlineStatus.toString();
          this.dialogEditorVisible = true
          var head = document.head || document.getElementsByTagName('head')[0]
          var style = document.createElement('style')
          style.setAttribute('id', 'pdfStyle')
          style.innerHTML = tar.style
          head.appendChild(style)
          setTimeout(() => {
            this.$refs.editor.setContent(this.temp.content)
          }, 2000)
        })
        .catch((e) => {
          this.$notify({
            message: '获取公告详情失败',
            type: 'error',
            duration: 2000
          })
        })

        return ;
      }
      getAnnouncementContentnew({ id: e.id, type: e.type })
        .then((res) => {
          const tar = res.Data[0]
          this.temp = Object.assign({}, tar)
          // this.onlineStatusStr = this.temp.onlineStatus.toString();
          this.dialogEditorVisible = true
          var head = document.head || document.getElementsByTagName('head')[0]
          var style = document.createElement('style')
          style.setAttribute('id', 'pdfStyle')
          style.innerHTML = tar.style
          head.appendChild(style)
          setTimeout(() => {
            this.$refs.editor.setContent(this.temp.content)
          }, 2000)
        })
        .catch((e) => {
          this.$notify({
            message: '获取公告详情失败',
            type: 'error',
            duration: 2000
          })
        })
    },
    deletePdfContent() {
      this.temp.content = ''
      this.$refs.editor.setContent(this.temp.content)
    },
    async savePdfEditor() {
      try {
        // try {
        //   this.temp.tagName =
        //     this.$refs.tagSelect.$el.getElementsByTagName('input')[0].value
        // } catch (e) {
        //   console.log(e)
        // }
        let res = null;
        if(this.listQuery.type==='inquiry'){
          res = await saveInquiryContent({
            id: this.temp.id,
            title: this.temp.title,
            stkCode: this.temp.stkCode,
            tagName: this.temp.tagName,
            tagId: this.temp.tagId,
            content: this.temp.content || null,
            type: this.temp.type,
            style: this.temp.style,
            onlineStatus: this.temp.onlineStatus,
            contentLen: this.temp.content.length || 0
          })
        }else{
          res = await saveAnnouncementContentnew({
            id: this.temp.id,
            title: this.temp.title,
            stkCode: this.temp.stkCode,
            tagName: this.temp.tagName,
            tagId: this.temp.tagId,
            content: this.temp.content || null,
            type: this.temp.type,
            style: this.temp.style,
            onlineStatus: this.temp.onlineStatus,
            contentLen: this.temp.content.length || 0
          })
        }
        if (res.Meta.Success) {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          this.getAnnouncement()
          this.temp = {}
          this.dialogEditorVisible = false
        } else {
          this.$notify({
            message: '保存公告失败',
            type: 'error',
            duration: 2000
          })
        }
      } catch (e) {
        console.log(e)
        this.$notify({
          message: '保存公告失败' + e.toString(),
          type: 'error',
          duration: 2000
        })
      }
    },
    handleTagChange(value) {
      // console.log(value)
      setTimeout(() => {
        const len = value && value.length
        if (!len) return
        this.temp.tagId = value[len - 1]
        this.temp.tagName =
          this.$refs.tagSelect.$el.getElementsByTagName('input')[0].value
      }, 500)
    },
    resolvePdf() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

       if(this.listQuery.type==='inquiry'){

        resolveInquiryContent({
          reportId: this.temp.reportId,
          ossUrl: this.temp.ossUrl
        })
        .then((res) => {
          const obj = JSON.parse(res.Data[0])
          const dom = obj.dom
          // console.log(dom)
          this.temp.content = dom.body
          this.temp.style = dom.style || ''
          this.temp.style =
            this.temp.style +
            `
                          .table_holder{ margin: 0 10px 20px; padding-bottom: 10px; overflow-x: scroll; overflow-y:hidden;}
                          .table_holder::-webkit-scrollbar { height:6px;}
                          .table_holder::-webkit-scrollbar-track { background-color: #f0f0f0;  border-radius: 3px;}
                          .table_holder::-webkit-scrollbar-thumb { border-radius: 3px; background:rgba(0,0,0,0.3); }
                          .table_holder::-webkit-scrollbar-thumb:window-inactive { background:rgba(0,0,0,0.1);}
                          .table_holder table{ margin: 0 ; padding: 0; }

                          img{ width: 100%; height: auto; }
                          .news_txt > div > div > p,
                          .news_txt > div > p{font-size: 14px;  line-height: 1.5; text-indent: 10px; padding: 0; margin: 0 0 10px; font-family:  Helvetica, sans-serif; text-align: left; color: rgba(13,13,13,1);}
                          .news_txt > div > div > p span,
                          .news_txt > div > p span{font-size: 14px;  line-height: 1.5; text-indent: 10px; padding: 0; margin: 0;  font-family:  Helvetica, sans-serif; text-align: left; color: rgba(13,13,13,1);}
                          .news_txt p, .news_txt div{ margin:inherit; text-align: inherit; }

                          .news_txt > div > div > p.single_page_img,
                          .news_txt > div > p.single_page_img{ text-indent: 0; }

                          nobr{ white-space: normal; }`
          // this.onlineStatusStr = this.temp.onlineStatus.toString();
          const head =
            document.head || document.getElementsByTagName('head')[0]
          const style = document.createElement('style')
          style.setAttribute('id', 'pdfStyle')
          style.innerHTML = this.temp.style
          head.appendChild(style)
          setTimeout(() => {
            try {
              this.$refs.editor.setContent(this.temp.content)
            } catch (e) {
              console.log(e)
            }
            loading.close()
          }, 2000)
        })
        .catch((e) => {
          // console.log(e)
          loading.close()
          this.$notify({
            message: '重新解析公告失败',
            type: 'error',
            duration: 2000
          })
        })
        return false;
      }

      resolveAnnouncementContent({
        reportId: this.temp.reportId,
        ossUrl: this.temp.ossUrl
      })
        .then((res) => {
          const obj = JSON.parse(res.Data[0])
          const dom = obj.dom
          // console.log(dom)
          this.temp.content = dom.body
          this.temp.style = dom.style || ''
          this.temp.style =
            this.temp.style +
            `
                          .table_holder{ margin: 0 10px 20px; padding-bottom: 10px; overflow-x: scroll; overflow-y:hidden;}
                          .table_holder::-webkit-scrollbar { height:6px;}
                          .table_holder::-webkit-scrollbar-track { background-color: #f0f0f0;  border-radius: 3px;}
                          .table_holder::-webkit-scrollbar-thumb { border-radius: 3px; background:rgba(0,0,0,0.3); }
                          .table_holder::-webkit-scrollbar-thumb:window-inactive { background:rgba(0,0,0,0.1);}
                          .table_holder table{ margin: 0 ; padding: 0; }

                          img{ width: 100%; height: auto; }
                          .news_txt > div > div > p,
                          .news_txt > div > p{font-size: 14px;  line-height: 1.5; text-indent: 10px; padding: 0; margin: 0 0 10px; font-family:  Helvetica, sans-serif; text-align: left; color: rgba(13,13,13,1);}
                          .news_txt > div > div > p span,
                          .news_txt > div > p span{font-size: 14px;  line-height: 1.5; text-indent: 10px; padding: 0; margin: 0;  font-family:  Helvetica, sans-serif; text-align: left; color: rgba(13,13,13,1);}
                          .news_txt p, .news_txt div{ margin:inherit; text-align: inherit; }

                          .news_txt > div > div > p.single_page_img,
                          .news_txt > div > p.single_page_img{ text-indent: 0; }

                          nobr{ white-space: normal; }`
          // this.onlineStatusStr = this.temp.onlineStatus.toString();
          const head =
            document.head || document.getElementsByTagName('head')[0]
          const style = document.createElement('style')
          style.setAttribute('id', 'pdfStyle')
          style.innerHTML = this.temp.style
          head.appendChild(style)
          setTimeout(() => {
            try {
              this.$refs.editor.setContent(this.temp.content)
            } catch (e) {
              console.log(e)
            }
            loading.close()
          }, 2000)
        })
        .catch((e) => {
          // console.log(e)
          loading.close()
          this.$notify({
            message: '重新解析公告失败',
            type: 'error',
            duration: 2000
          })
        })
    },
    getDict() {
      getTypeDict({ type: 'news_source' }).then((response) => {
        this.dataDict.news_source = response.Data
      })
    },
    handleShow(e) {
      if(this.listQuery.type==='inquiry'){
        getInquiryContent({ id: e.id ,type:e.type})
        .then((res) => {
          const tar = res.Data[0]
          this.temp = Object.assign({}, tar)
          this.temp.tagName = '问询函件';
          const tarStyle = document.querySelector('#pdfStyle')
          if (tarStyle) {
            tarStyle.innerHTML = tar.style
          } else {
            var head =
              document.head || document.getElementsByTagName('head')[0]
            var style = document.createElement('style')
            style.setAttribute('id', 'pdfStyle')
            style.innerHTML = tar.style
            head.appendChild(style)
          }
          this.dialogFormVisible = true
        })
        .catch((e) => {
          this.$notify({
            message: '获取公告详情失败',
            type: 'error',
            duration: 2000
          })
        })

        return false;
      }
      getAnnouncementContentnew({ id: e.id ,type:e.type})
        .then((res) => {
          const tar = res.Data[0]
          this.temp = Object.assign({}, tar)
          const tarStyle = document.querySelector('#pdfStyle')
          if (tarStyle) {
            tarStyle.innerHTML = tar.style
          } else {
            var head =
              document.head || document.getElementsByTagName('head')[0]
            var style = document.createElement('style')
            style.setAttribute('id', 'pdfStyle')
            style.innerHTML = tar.style
            head.appendChild(style)
          }
          this.dialogFormVisible = true
        })
        .catch((e) => {
          this.$notify({
            message: '获取公告详情失败',
            type: 'error',
            duration: 2000
          })
        })
    },
    downLoadPDF() {
      window.location.href = this.temp.ossUrl
    },
    getStockList() {
      articleStockList({
        pageNum: 1,
        pageSize: 99999
      }).then((response) => {
        this.allStockList = response.Data
      })
    },
    handlePreview() {
      alert()
      articleSourceGet(this.temp).then((response) => {
        console.log(response)
        this.$message({
          message: '获取原文成功',
          type: 'success'
        })
        this.previewContent = response.Data[0].sourceContentStr
        this.preview = true
      })
    },
    searchAnnouncement(node, data, e) {
      e.stopPropagation()
      this.listQuery.parentId = data.code
      this.listQuery.type = data.type
      if (data.id === 99999) {
        this.tableName = '公告列表'
      } else {
        this.tableName = data.name
      }
      this.getAnnouncement()
    },
    editKind(node, data, e) {

      e.stopPropagation()
      this.kindTitle = data.name
      this.formCreate.id = data.id
      this.formCreate.attitudeStatus = data.attitudeStatus
      this.formCreate.pushStatus = data.pushStatus
      this.centerDialogVisible = true
      this.listQuery.type = data.type;
    },
    edit() {
      let typeName = this.listQuery.type;

      this.$refs['formCreate'].validate((valid) => {
        if (valid) {
          const params = {
            id: this.formCreate.id,
            attitudeStatus: this.formCreate.attitudeStatus,
            pushStatus: this.formCreate.pushStatus
          }

          tagUpdate(typeName,params).then(() => {
            this.centerDialogVisible = false
            this.$message({ message: '操作成功', type: 'success' })
            this.getList()
          })
        }
      })
    },
    getList() {
      Promise.all([stocknoticeTagAll(), fundnoticeTagAll(),bondnoticeTagAll(),thrboardnoticeTagAll()]).then(res => {
        // const  inquiryNode = {
        //   code:"115",
        //   fCode:'115',
        //   id:'115',
        //   isValid:true,
        //   levelNum:0,
        //   list:[],
        //   name:"问询函件",
        //   pCode:'0',
        //   type:"inquiry",
        //   // tempType:"inquiry"
        // }

        let tempStockTree = res[0].Data;
        // tempStockTree[0].list.push(inquiryNode);
        this.data[0].list = [...tempStockTree, ...res[1].Data,...res[2].Data,...res[3].Data]

        // if(inquiryNode.name){
        //   this.data[0].list.push(inquiryNode);
        // }
      })
      // console.log(this.data)
    },
    filterNode(value, data) {
      if (!value) return true
      return (
        data.name.indexOf(value) !== -1 ||
        pinyin(data.name, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: true
        })
          .join('')
          .indexOf(value) !== -1
      )
    },
    filterStock(query) {
      if (query !== '') {
        let result = this.allStockList
          .filter((item) => {
            return (
              item.name.indexOf(query) > -1 ||
              item.code.indexOf(query) > -1 ||
              pinyin(item.name, {
                style: pinyin.STYLE_FIRST_LETTER,
                heteronym: true
              })
                .join('')
                .indexOf(query) > -1
            )
          })
          .sort((a, b) => a.name.length - b.name.length)
        if (result.length >= 100) {
          this.$message({
            message: '菜单超过100条，只显示前100条，请输入更多信息'
          })
          result = result.slice(0, 99)
        }
        this.filterStockList = result
      } else {
        this.filterStockList = []
      }
    },
    renderContent(h, { node, data, store }) {
      return (
        <span
          class={
            node.isLeaf && node.level > 1
              ? 'custom-tree-node'
              : 'custom-tree-node custom-tree-notLeaf'
          }
        >
          <el-tooltip
            className='item'
            effect='dark'
            content={node.label}
            placement='top-start'
          >
            <span class='tree-label'>{node.label}&nbsp;</span>
          </el-tooltip>
          <span>
            {data.attitudeStatus == 1 ? (
              <span style='color: white;background-color: #4cba2a;border-radius: 5px;'>
                &nbsp;利空&nbsp;
              </span>
            ) : (
              ''
            )}
            {data.attitudeStatus == 2 ? (
              <span style='color: white;background-color: #c5d106;border-radius: 5px;'>
                &nbsp;中性&nbsp;
              </span>
            ) : (
              ''
            )}
            {data.attitudeStatus == 3 ? (
              <span style='color: white;background-color: red;border-radius: 5px;'>
                &nbsp;利好&nbsp;
              </span>
            ) : (
              ''
            )}
            {data.child == 0 ? (
              <el-button
                size='mini'
                type='text'
                on-click={(e) => this.editKind(node, data, e)}
              >
                编辑分类
              </el-button>
            ) : (
              ''
            )}
            {node.level > 1 ? (
              <el-button
                size='mini'
                type='text'
                on-click={(e) => this.searchAnnouncement(node, data, e)}
              >
                查看公告
              </el-button>
            ) : ''}
          </span>
        </span>
      )
    }
  },
  // {data.attitudeStatus == 0 ? <span>无态度&nbsp;&nbsp;</span> : ''}
  data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      refreshing: false,
      downLoading: false,
      searchBarVisable: false,
      dialogFormVisible: false,
      dialogEditorVisible: false,
      tableName: '公告列表',
      onlineStatusStr: '0',
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        parentId: 0,
        onlineStatus: '',
        title: '',
        stkCode: '',
        // type: 'stock',
        chooseTime: '1',
        chooseTime2: '',
        updateTime: [
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() -
            24 * 3600 * 1000,
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() - 1000
        ],
        // updateTime: '',
        publishTime: ''
      },
      filterText: '',
      allStockList: [],
      filterStockList: [],
      multipleSelection: [],
      multipleSelectionIds: [],
      props: {
        label: 'name',
        children: 'list'
      },
      data: [
        {
          name: '公告管理',
          id: 99999,
          list: [],
          attitudeStatus: -1
        }
      ],
      tableData: [],
      temp: {},
      formCreate: {
        id: '',
        attitudeStatus: '',
        pushStatus: ''
      },
      dataDict: {
        news_source: []
      },
      centerDialogVisible: false,
      kindTitle: '',
      rules: {
        kind: [{ required: true, message: '请选择...', trigger: 'change' }],
        pushSolution: [
          { required: true, message: '请选择...', trigger: 'change' }
        ]
      },
      tagOptions: [],
      onlineStatusOption: [
        {
          id: 0,
          text: '上线'
        },
        {
          id: 1,
          text: '下线'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .col {
    margin: auto;
  }

  .card-body {
    margin-top: 1rem;
  }

  .form {
    max-width: 500px !important;
    margin: auto !important;
  }

  .phone {
    word-break break-all
    line-height 24px
    margin auto
    width 375px
    height 600px
    overflow hidden
    &::-webkit-scrollbar {
      display: none;
    }
    /deep/ .el-card__header {
      text-align center
      padding 10px 15px
      background-color #000
      color #fff
      font-size 120%
      font-weight bold
			height 45px
		}
		/deep/ .el-card__body {
			width 390px
			height 550px
			overflow-y auto
			padding 0 40px 20px 20px
		}
    .title {
      text-align justify
      margin-top 5px
      font-size 110%
      font-weight bolder
    }
    .info {
      font-size 85%
      color #5d5d5d
    }
    .summary {
      text-align justify
      padding 5px 10px
      margin 10px 0 10px
      font-size 90%
      line-height 1.2rem
      color #333
      border-radius 5px
      background-color #ddd
    }
    .content {
      text-align justify
      &:after {
        display: inline-block;
        content: '';
        padding-left: 100%;
      }
    }
  }

  .pc {
    word-break break-all
    line-height 24px
    font-size: 16px
    margin auto
    width 100%
    height 600px
    overflow-y auto
    &::-webkit-scrollbar {
      display: none;
    }
    .title {
      text-align justify
      margin-top 12px
      font-size 120%
      font-weight bolder
    }
    .info {
      font-size 85%
      color #5d5d5d
    }
    .summary {
      text-align justify
      padding 5px 10px
      margin 10px 0
      font-size 90%
      line-height 1.2rem
      color #333
      border-radius 5px
      background-color #ddd
    }
    .content {
      text-align justify
      &:after {
        display: inline-block;
        content: '';
        padding-left: 100%;
      }
    }
  }

</style>

<style>
  .el-tag {
    margin-right: 3px;
    background-color: rgba(64, 158, 255, .1);
    color: #409EFF;
    border-radius: 4px;
    padding: 0 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(64, 158, 255, .2);
  }
</style>


